import 'package:flutter/material.dart';
import 'package:kasax_demos2/utils/ui_utils.dart';

import 'info_wrapper.dart';
import 'pinterest_details_page.dart';

class PinterestHomeDemo extends StatefulWidget {
  const PinterestHomeDemo({Key? key}) : super(key: key);

  @override
  _PinterestHomeDemoState createState() => _PinterestHomeDemoState();
}

class _PinterestHomeDemoState extends State<PinterestHomeDemo> {
  List<PinterestInfo> _list = [
    PinterestInfo(Icons.drive_eta_rounded, "如何从0到1，写出一份完美的PRD文档", 27, "零基础",
        descrption:
            "PRD的组成及写作技巧，从理论到案例，帮助产品新人实现从0到1，学会用产品思维思考问题，输出敏捷的PRD文档，快速上手日常产品工作。"),
    PinterestInfo(Icons.stream, "玩转组件库搭建全流程", 10, "零基础",
        descrption:
            "组件库是软件开源协同的一个典型。利用文档完善，代码健全的高质量组件库，前端工程师们可以快速搭建UI，从而大大提升工作效率，节约人力成本。"),
    PinterestInfo(
        Icons.park,
        "组件库是软件开源协同的一个典型。利用文档完善，代码健全的高质量组件库，前端工程师们可以快速搭建UI，从而大大提升工作效率，节约人力成本。",
        35,
        "零基础",
        descrption:
            "本此课程主要讲解自然语言处理中的文本分类任务，先带着大家了解文本表征方法、词向量技术、激活函数的使用、然后对英文文本分类、中文文本分类和不同分类任务（二分类、多分类和多标签分类）进行实战讲解、最后讲解模型评估方法，并且进行知识点扩展。带领大家系统的了解一个完整的文本分类任务所需具备的基础技能。从前到后，帮助大家熟悉文本分类项目的流程及工作内容。"),
    PinterestInfo(Icons.adb_outlined, "墨刀快速入门到精通", 66, "零基础",
        descrption:
            "本课程从0开始，通过操作结合案例方式，帮助学生快速入手墨刀并熟悉掌握墨刀的交互效果制作，适合产品新手、小白基础入门。"),
    PinterestInfo(
        Icons.signal_wifi_4_bar_lock, "JAVA 函数式编程", 85, "Intermediate",
        descrption:
            "本课程以 Java 11 为编译环境，讲解了 Java 对函数式编程支持，以及用实战小例子演示如何使用函数式简洁优雅的直击问题核心逻辑。另，老师新作 《Spring Security+OAuth2 精讲 多场景打造企业级认证与授权》https://coding.imooc.com/class/455.html 也上线啦，课程中将结合前后端分离的权限管理应用，基于从单体到微服务的演进，精讲主流安全框架 Spring Security5.x 的核心技术，一站式覆盖目前企业主流认证授权的方方面面，感兴趣的同学，可以关注一下，欢迎撒花拍砖~~"),
    PinterestInfo(Icons.accessibility_rounded, "人工智能--语音入门", 23, "初级-算法",
        descrption:
            "讲解语音的基础知识，语音的特征工程，并会基于前面的学习知识，带领大家完成一个语音相关的项目，帮助同学们熟悉开展语音相关项目的流程及工作内容，轻松步入语音识别得大门~~"),
    PinterestInfo(Icons.accessibility_rounded, "Linux速成班", 69, "服务器",
        descrption: "对Linux感兴趣，对Linux运维感兴趣，想入门Linux运维的人员， 为找工作增加经验而学习"),
    PinterestInfo(Icons.accessibility_rounded, "全方位入门git", 33, "git",
        descrption:
            "git现在已经成为面试和工作中必备必会的一项技能，本次课程会通过多个维度来全方位入门git，让同学们能够在面试和工作中游刃有余，没有阻碍。"),
    PinterestInfo(Icons.accessibility_rounded,
        "SpringBoot+Uniapp实战开发全新仿抖音短视频App", 52, "实战",
        descrption:
            "短视频在未来几年都是风口，许多公司都在朝这个方向进行业务的拓展，蛋糕非常大。本课程将从0起步，带你使用最新SpringBoot技术结合Uniapp，完成当下流行的仿抖音短视频项目。通过完整的项目历练，无论是作为毕设，还是丰富项目经验，都会让你在众多竞争者中脱颖而出。"),
    PinterestInfo(
        Icons.accessibility_rounded, "物联网基础入门，实战可落地的 AIoT 项目", 49, "实战",
        descrption:
            "未来，物联网技术在各行业的使用将越来越广，对人才的需求也越发凸显。在Java、Python等技术进入红海的当下，物联网也成为了很多人寻找突破的方向。由于涉及软硬件结合及多种复杂技术，对传统工程师来说是极大的挑战。本课程创新性的整合当下热门物联网技术，贯穿多个经典案例，带你全面、系统的掌握完整物联网项目开发，轻松应对面试及工作需求。"),
    PinterestInfo(Icons.accessibility_rounded, "OpenCV入门到进阶：实战三大典型项目", 88, "实战",
        descrption:
            "人脸识别、自动驾驶、物体检测……想进军未来高科技行业，OpenCV是基石。本课程带你系统掌握计算机视觉核心知识体系，突破OpenCV重难点，真实落地“车辆检测、文字识别、图像拼接” 三大典型项目,高效积累计算机视觉实战经验与能力"),
  ];

  @override
  Widget build(BuildContext context) {
    var bgColor = Color.fromRGBO(58, 66, 86, 1.0);
    return Theme(
        data: ThemeData(primaryColor: bgColor),
        // data: Theme.of(context)
        //     .copyWith(primaryColor: Color.fromRGBO(58, 66, 86, 1.0)),
        child: Scaffold(
          backgroundColor: bgColor,
          appBar: AppBar(
            centerTitle: true,
            elevation: 0,
            title: Text("Lessons"),
            actions: [IconButton(onPressed: () {}, icon: Icon(Icons.menu))],
          ),
          body: buildContainerList(),
          bottomNavigationBar: Container(
            height: 55,
            child: BottomAppBar(
              elevation: 0,
              color: bgColor,
              child: Row(
                mainAxisAlignment: MainAxisAlignment.spaceEvenly,
                children: [
                  IconButton(
                      onPressed: () {},
                      icon: Icon(
                        Icons.home,
                        color: Colors.white,
                      )),
                  IconButton(
                      onPressed: () {},
                      icon: Icon(Icons.not_started, color: Colors.white)),
                  IconButton(
                      onPressed: () {},
                      icon: Icon(Icons.favorite, color: Colors.white)),
                  IconButton(
                      onPressed: () {},
                      icon: Icon(Icons.topic, color: Colors.white))
                ],
              ),
            ),
          ),
        ));
  }

  Container buildContainerList() {
    return Container(
      margin: EdgeInsets.only(bottom: 2),
      child: ListView.builder(
        itemBuilder: (context, index) {
          var info = _list[index];
          // return FlatButton(
          //   onPressed: () {
          //     print("aaaaaaaaa");
          //     Navigator.of(context).push(MaterialPageRoute(
          //         builder: (context) => PinterestDetailsPage()));
          //   },
          //   child: buildMenuItem(info),
          // );
          return GestureDetector(
            onTap: () {
              print("aaaaaaaaa");
              Navigator.of(context).push(MaterialPageRoute(
                  builder: (context) => PinterestDetailsPage(info)));
            },
            child: buildMenuItem(info),
          );
        },
        itemCount: _list.length,
      ),
    );
  }

  Container buildMenuItem(PinterestInfo info) {
    return Container(
      child: Container(
        decoration: BoxDecoration(
            color: Colors.blueGrey, borderRadius: BorderRadius.circular(12)),
        margin: EdgeInsets.only(top: 10, left: 16, right: 16),
        // padding: EdgeInsets.only(left: 16, right: 16, top: 10, bottom: 10),
        padding: EdgeInsets.all(16),
        // color: Colors.blueGrey,
        child: Row(
          children: [
            Icon(
              info.icon,
              color: Colors.white70,
              size: 30,
            ),
            Expanded(
                child: Container(
              margin: EdgeInsets.only(left: 10, right: 10),
              child: Column(
                crossAxisAlignment: CrossAxisAlignment.start,
                children: [
                  Text(
                    info.title,
                    maxLines: 1,
                    overflow: TextOverflow.ellipsis,
                    style: TextStyle(color: Colors.white70, fontSize: 16),
                  ),
                  SizedBox(
                    height: 5,
                  ),
                  Row(
                    crossAxisAlignment: CrossAxisAlignment.center,
                    children: [
                      // Icon(Icons.linear_scale,
                      //     color: Colors.yellowAccent),
                      // buidMyProgressbar(info),
                      buildLinearProgress(info.progress / 100, 40,
                          radius: 12.0, valueColor: Colors.amber),
                      SizedBox(
                        width: 10,
                      ),
                      Text(info.tag,
                          style: TextStyle(color: Colors.white70, fontSize: 14))
                    ],
                  )
                ],
              ),
            )),
            Icon(
              Icons.chevron_right,
              color: Colors.white70,
              size: 30,
            )
          ],
        ),
      ),
    );
  }

  SizedBox buidMyProgressbar(PinterestInfo info) {
    return SizedBox(
      width: 40,
      height: 8,
      child: ClipRRect(
        borderRadius: BorderRadius.all(Radius.circular(12)),
        child: LinearProgressIndicator(
          backgroundColor: Color(0xffD6D6D6),
          value: info.progress / 100,
          // valueColor: AlwaysStoppedAnimation<Color>(
          //     Color(0xff00ff00)),
          valueColor: AlwaysStoppedAnimation<Color>(Colors.amber),
        ),
      ),
    );
  }

  Container buildPbContainer(PinterestInfo info) {
    return Container(
      decoration: BoxDecoration(borderRadius: BorderRadius.circular(20)),
      child: LinearProgressIndicator(
        value: info.progress / 100,
        backgroundColor: Colors.lightBlue,
        valueColor: AlwaysStoppedAnimation<Color>(Colors.amber),
      ),
    );
  }
}
